<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="../../d3.js"></script>
<script>

//svg尺寸
var width = 500,height = 500;

//数据集
var dataset=[0,10,20,30,40,50,60,70,80,90,100];

var color = d3.scale.category10();

//分位数比例尺
var thresholdScale = d3.scale.threshold() 
	.domain([60,70,90])
	.range(["差","中","良","优"]); 

//创建svg标签
var svg = d3.select("body").append("svg")
    .attr("width", width+30)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + 15 + "," + 0 + ")");
    
//创建文本标签
var texts=svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text( function(d){ return thresholdScale(d); })
	.attr({
		x:function(d,i){ return i*width/(dataset.length-1); },
		y:width/3,
		'text-anchor':'middle',
		fill:function(d){ return color(thresholdScale(d)); },
		'font-weight':'bold',
		'font-size':30
	});

//轴比例尺
var axisScale=d3.scale.linear()
		.domain([d3.min(dataset), d3.max(dataset)])
		.range([0, width]);
		
//创建坐标轴
svg.append("g")
 .attr("transform", "translate(" + 0 + "," + (width/3+20) + ")")
    .attr("class", "x axis")
    .call(d3.svg.axis().scale(axisScale).orient("bottom"));

</script>